<template>
  <v-container id="user-profile" fluid tag="section">
    <v-row justify="center">
      <v-col cols="12" md="8">
        <base-material-card>
          <template v-slot:heading>
            <div class="display-2 font-weight-light">修改用户资料</div>

            <div class="subtitle-1 font-weight-light">
              【{{ name }}】请完善您的个人用户资料
            </div>
          </template>

          <v-form>
            <v-container class="py-0">
              <input type="hidden" v-model="formData.id" />
              <v-row>
                <v-col cols="12" md="4">
                  <v-text-field
                    label="用户名"
                    v-model="formData.account"
                    class="purple-input"
                  />
                </v-col>

                <v-col cols="12" md="4">
                  <v-text-field
                    label="邮箱地址"
                    v-model="formData.email"
                    class="purple-input"
                  />
                </v-col>

                <v-col cols="12" md="6">
                  <v-text-field
                    label="姓名"
                    v-model="formData.name"
                    class="purple-input"
                  />
                </v-col>

                <v-col cols="12" md="6">
                  <v-text-field
                    label="昵称"
                    v-model="formData.nickName"
                    class="purple-input"
                  />
                </v-col>

                <v-col cols="12">
                  <v-text-field
                    label="出生日期"
                    v-model="formData.birthday"
                    class="purple-input"
                  />
                </v-col>

                <v-col cols="12" md="4">
                  <v-text-field
                    label="手机号"
                    v-model="formData.phone"
                    class="purple-input"
                  />
                </v-col>

                <v-col cols="12" md="4">
                  <v-text-field
                    label="电话号"
                    v-model="formData.tel"
                    class="purple-input"
                  />
                </v-col>

                <v-col cols="12" md="4">
                  <v-text-field
                    label="性别"
                    v-model="formData.sex"
                    class="purple-input"
                  />
                </v-col>

                <v-col cols="12" class="text-right">
                  <v-btn color="success" class="mr-0"> 更新用户资料 </v-btn>
                </v-col>
              </v-row>
            </v-container>
          </v-form>
        </base-material-card>
      </v-col>

      <v-col cols="12" md="4">
        <base-material-card
          class="v-card-profile"
          :avatar="formData.avatar"
          v-model="formData.avatar"
        >
          <v-card-text class="text-center">
            <h4 class="display-2 font-weight-light mb-3 black--text">
              {{ formData.nickName }}
            </h4>

            <p class="font-weight-light grey--text">
              备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注
              备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注
              备注
            </p>

            <v-btn color="success" rounded class="mr-0"> 关注 </v-btn>
          </v-card-text>
        </base-material-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "UserProfile",
  data: () => ({
    formData: {
      id: "",
      account: "",
      nickName: "",
      name: "",
      avatar: "",
      birthday: "",
      sex: "",
      email: "",
      phone: "",
      tel: "",
    },
  }),

  created() {
    this.getUserInfo();
  },
  // 计算属性
  computed: {
    ...mapState({
      name: (state) => state.user.name,
      barImage: (state) => state.app.barImage,
    }),
  },

  methods: {
    /**
     * 获取用户信息
     */
    getUserInfo() {
      var that = this;
      that.request
        .get("/api/user/getById", { id: 1 })
        .then((res) => {
          that.formData = res.data;
        });
    },
  },
};
</script>
